import React, { useEffect, useState } from 'react';

export default function () {
  const [status, setStatus] = useState(10);
  let timer = null;
  useEffect(() => {
    if (status > 0) {
      timer = setTimeout(() => {
        setStatus((val) => val - 1);
      }, 1000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [status]);

  const cardDataList = [
    {
      brandName: '弄堂里',
      brandLogo:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*anNdQqA_I_AAAAAAAAAAAAAAARQnAQ',
      distanceDesc: '500m',
      campImage:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*U29sSqgeU-4AAAAAAAAAAAAAARQnAQ',
      promoLogo: [
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*y6CTRo9L2oEAAAAAAAAAAAAAARQnAQ',
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*Q1d4SIoeKRkAAAAAAAAAAAAAARQnAQ',
      ],
      voucherDesc: '弄堂里14元超值优惠券包x2',
      benefitAmount: '1',
      oriPriceAmount: '28',
      discountDesc: '0.6折',
      voucherStockNum: '库存888份',
    },
    {
      brandName: '弄堂里',
      brandLogo:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*anNdQqA_I_AAAAAAAAAAAAAAARQnAQ',
      distanceDesc: '500m',
      campImage:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*U29sSqgeU-4AAAAAAAAAAAAAARQnAQ',
      promoLogo: [
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*Q1d4SIoeKRkAAAAAAAAAAAAAARQnAQ',
      ],
      voucherDesc: '弄堂里14元超值优惠券包x2',
      benefitAmount: '1',
      discountDesc: '0.6折',
    },
    {
      brandName: '飞猪',
      brandLogo:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*dCL5Q4oBaQsAAAAAAAAAAAAAARQnAQ',
      campImage:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*MZ7VSaNZXRYAAAAAAAAAAAAAARQnAQ',
      promoLogo:
        'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*90WEQLmnKdkAAAAAAAAAAAAAARQnAQ',
      voucherDesc: '南方航空20元优惠券',
      benefitAmount: '20',
    },
  ];
  return (
    <>
      {cardDataList.map((item, index) => (
        <div
          key={index}
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            width: 400,
            padding: 10,
          }}
        >
          <div style={{ width: '28%' }}>
            <div>
              <img src={item.brandLogo} style={{ width: 20 }} />
              <span>{item.brandName}</span>
            </div>
            <img src={item.campImage} style={{ width: 100 }} />
          </div>
          <div style={{ margin: '20px 0' }}>
            <img src={item.promoLogo} style={{ width: 40 }} />
            <div>{item.voucherDesc}</div>
            <div>{item.benefitAmount}</div>
          </div>
          <div
            style={{
              width: '28%',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <div
              style={{
                background: 'orange',
                width: 80,
                height: 40,
                textAlign: 'center',
                borderRadius: 20,
              }}
            >
              {status === 0 ? '抢购' : status}
            </div>
          </div>
        </div>
      ))}
    </>
  );
}
